
<template>
  <div class="root base-background-img">
    <div class="home">
      <router-link to="/">
        <img src="~@/assets/images/swiper/shouye.png">
      </router-link>
    </div>
    <div class="back">
      <router-link to="/youxiao">
        <img src="~@/assets/images/swiper/fanhui.png">
      </router-link>
    </div>
    <div class="shang">
        <img src="~@/assets/youxiaoxianjie/suanshu/a/shang.png">
    </div>
    <div class="xia">
      <router-link to="/youxiao/suanshu/suanshuxia">
        <img src="~@/assets/youxiaoxianjie/suanshu/a/xia.png">
      </router-link>
    </div>
    <ul class="ul-item-content">
      <li class="li-item-content" v-for='(item, index) in tabs' :key="index" :class="{'active': item.isSelected}" @click="swiper(item)">
        <img :src="item.img" alt="">
      </li>
    </ul>
    <c-pdf @closePdf="closePdf" v-if="isshowpdf" :info="info" :infourl="pdfurl"></c-pdf>
  </div>
</template>

<script>
  export default {
    name: 'youxiao-suanshushang',
    data () {
      return {
        isshowpdf: false,
        ishsowvideo: false,
        info: '',
        infourl: '',
        tabs: [{
          img: 'static/youxiao/suanshu/a/1.png',
          url: 'static/youxiao/pdf/suanshu/4以内加减.pdf',
          data: []
        },
        {
          img: 'static/youxiao/suanshu/a/2.png',
          url: 'static/youxiao/pdf/suanshu/2.5、6的加减.pdf',
          data: []
        },
        {
          img: 'static/youxiao/suanshu/a/3.png',
          url: 'static/youxiao/pdf/suanshu/3.7、8的加减.pdf',
          data: []
        },
        {
          img: 'static/youxiao/suanshu/a/4.png',
          url: 'static/youxiao/pdf/suanshu/4.9、10的加减.pdf',
          data: []
        },
        {
          img: 'static/youxiao/suanshu/a/5.png',
          url: 'static/youxiao/pdf/suanshu/1.整十加减（一）.pdf',
          data: []
        },
        {
          img: 'static/youxiao/suanshu/a/6.png',
          url: 'static/youxiao/pdf/suanshu/2.20以内不进位加（一）.pdf',
          data: []
        },
        {
          img: 'static/youxiao/suanshu/a/7.png',
          url: 'static/youxiao/pdf/suanshu/3.20以内不进位加（二）.pdf',
          data: []
        },
        {
          img: 'static/youxiao/suanshu/a/8.png',
          url: 'static/youxiao/pdf/suanshu/4.20以内不退位减.pdf',
          data: []
        },
        {
          img: 'static/youxiao/suanshu/a/9.png',
          url: 'static/youxiao/pdf/suanshu/1.20以内进位加（一）.pdf',
          data: []
        },
        {
          img: 'static/youxiao/suanshu/a/10.png',
          url: 'static/youxiao/pdf/suanshu/2.20以内进位加（二）.pdf',
          data: []
        },
        {
          img: 'static/youxiao/suanshu/a/11.png',
          url: 'static/youxiao/pdf/suanshu/3.20以内退位减(1).pdf',
          data: []
        },
        {
          img: 'static/youxiao/suanshu/a/12.png',
          url: 'static/youxiao/pdf/suanshu/4.20以内退位减（2）.pdf',
          data: []
        },
        {
          img: 'static/youxiao/suanshu/a/13.png',
          url: 'static/youxiao/pdf/suanshu/1.整十加减（二）.pdf',
          data: []
        },
        {
          img: 'static/youxiao/suanshu/a/14.png',
          url: 'static/youxiao/pdf/suanshu/2.总复习（一）.pdf',
          data: []
        },
        {
          img: 'static/youxiao/suanshu/a/15.png',
          url: 'static/youxiao/pdf/suanshu/3.总复习（二）.pdf',
          data: []
        },
        {
          img: 'static/youxiao/suanshu/a/16.png',
          url: 'static/youxiao/pdf/suanshu/4.总复习（三）.pdf',
          data: []
        }]
      }
    },
    methods: {
      swiper: function (item) {
        console.log(item)
        this.info = item.data
        this.pdfurl = item.url
        this.isshowpdf = true
      },
      closePdf: function () {
        this.isshowpdf = false
      }
    }
  }
</script>

<style scoped>
@import "~@/assets/style/base.css";
.root {
  background: url(~@/assets/youxiaoxianjie/suanshu/a/bg.png);
}
.root > div {
  position: absolute; 
}
.ul-item-content {
  margin: 0;
  padding: 0;
  list-style-type: none;
  top: 230px;
  left: 90px;
  width: 1180px;
  height: 400px;
  position: absolute;
}
.li-item-content {
  cursor: pointer;
  float: left;
  margin: 15px 9px;
  position: initial;
  z-index: 10;
  width:250px;
}
.home {
top: 54px;
    left: 57px;
}
.back {
    top: 153px;
    left: 57px;
}
.shang{
  top:100px;
  left:600px;
}
.xia{
  top:100px;
  left:708px;
}
</style>
